import React, { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import { connect } from 'umi';
import { Radio, Row, Col, Card, Select, Space, Button, Input, InputNumber, Checkbox, Popover, notification } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import { InfoCircleOutlined } from '@ant-design/icons'
const RuleTemplate = (props, ref) => {
    const { promoterLevelList } = props
    const [list, setlist] = useState([])
    useEffect(() => {
        setlist(promoterLevelList)
    }, [promoterLevelList])
    useImperativeHandle(ref, () => {
        return {
            fetchData: list,
        };
    });
    const inputProps = {
        levelName: '',
        userConditionFlag: '0',
        costConditionFlag: '0',
        promoterConditionFlag: '0',
        userConditionValue: 0,
        costConditionValue: 0,
        promoterConditionValue: 0,
        goodsCommissionPercentage: 0,
        inviteCommissionPercentage: 0,
        validPromoterConditionValue: 0,
        validPromoterUserConditionFlag: '0',
        orderConditionValue: 0,
        shareConditionValue: 0,
        validPromoterConditionFlag: '0',
        validPromoterUserConditionValue: '0',
        orderConditionFlag: '0',
        shareConditionFlag: '0',
        systemFlag: '0',
        assessment: '',
    }
    const maxLength = 8
    const setListValue = (data) => {
        setlist(list.map((item, index) => {
            if (data.index === index) {
                return {
                    ...item, ...data
                }
            }
            return item
        }))
    }
    const addList = () => {
        if (list.length >= maxLength) {
            notification.warning({
                message: '温馨提示',
                description: '已达到最大数量限制',
            })
        } else {
            setlist([...list, inputProps])
        }
    }
    const removeList = (index) => {

        setlist(list.filter((o, key) => {
            return key !== index
        }))
    }
    const getColumns = [
        {
            title: '等级名称',
            dataIndex: 'levelName',
            render: (e, record, index) => {
                return <div style={{ width: 180 }}>
                    <Input showCount maxLength={6} onChange={(o) => {
                        setListValue({
                            index: index,
                            levelName: o.target.value
                        })
                    }} value={e}></Input>
                </div>
            }
        },
        {
            title: '等级规则',
            dataIndex: 'levelName',
            render: (e, record, index) => {
                const {
                    systemFlag,
                    userConditionFlag,
                    costConditionFlag,
                    promoterConditionFlag,
                    userConditionValue,
                    costConditionValue,
                    promoterConditionValue,
                    validPromoterConditionFlag,
                    validPromoterConditionValue,
                    validPromoterUserConditionFlag,
                    validPromoterUserConditionValue,
                    orderConditionFlag,
                    orderConditionValue,
                    shareConditionFlag,
                    shareConditionValue
                } = record
                if (systemFlag === '1') {
                    return '--'
                }
                else {
                    return <Space direction='vertical'>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={userConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                userConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>累计邀请客户</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        userConditionValue: e
                                    })
                                }} disabled={userConditionFlag !== '1'} value={userConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={costConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                costConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>客户累计消费</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        costConditionValue: e
                                    })
                                }} disabled={costConditionFlag !== '1'} value={costConditionValue}>
                                </InputNumber>
                                元
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={promoterConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                promoterConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>累计邀请推广员</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        promoterConditionValue: e
                                    })
                                }} disabled={promoterConditionFlag !== '1'} value={promoterConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={validPromoterConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                validPromoterConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>有效推广员</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        validPromoterConditionValue: e
                                    })
                                }} disabled={validPromoterConditionFlag !== '1'} value={validPromoterConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={validPromoterUserConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                validPromoterUserConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>有效推广用户</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        validPromoterUserConditionValue: e
                                    })
                                }} disabled={validPromoterUserConditionFlag !== '1'} value={validPromoterUserConditionValue}>
                                </InputNumber>
                                人
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={orderConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                orderConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>订单条件</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        orderConditionValue: e
                                    })
                                }} disabled={orderConditionFlag !== '1'} value={orderConditionValue}>
                                </InputNumber>
                                个
                            </Space>
                        </div>
                        <div style={{ textAlign: 'left' }}>
                            <Space>
                                <div style={{ width: 140 }}>
                                    <Checkbox
                                        checked={shareConditionFlag === '1' ? true : false}
                                        onChange={(e) => {
                                            setListValue({
                                                index: index,
                                                shareConditionFlag: e.target.checked ? '1' : '0'
                                            })
                                        }}>内容分享条件</Checkbox>
                                </div>

                                <InputNumber onChange={(e) => {
                                    setListValue({
                                        index: index,
                                        shareConditionValue: e
                                    })
                                }} disabled={shareConditionFlag !== '1'} value={shareConditionValue}>
                                </InputNumber>
                                个
                            </Space>
                        </div>

                    </Space>
                }

            }
        },
        {
            title: '考核周期',
            align: 'center',
            dataIndex: 'assessment',
            render: (e, record, index) => {
                return <div style={{ width: 100, margin: '0 auto' }}>
                    <Select placeholder={'请选择周期考核'} style={{ width: '100%', textAlign: 'left' }} options={[{ label: '月度', value: 'month' }, { label: '季度', value: 'quarter' }, { label: '年度', value: 'year' }]} onChange={(o) => {
                        setListValue({
                            index: index,
                            assessment: o
                        })
                    }} value={e}></Select>
                </div>
            }
        },

        {
            title: <Popover content={<div>
                <div>
                    商品佣金：推广员A的客户购买推广商品，A获得佣金。
                    默认商品佣金比例：用于添加商品/批量设置商品比例时默认填充的商品佣金比例
                </div>
            </div>}>
                默认商品佣金比例  <InfoCircleOutlined></InfoCircleOutlined>
            </Popover >,
            width: 120,
            dataIndex: 'goodsCommissionPercentage',
            render: (e, record, index) => {
                return <InputNumber addonAfter={<span>%</span>} max={100} onChange={(o) => {
                    setListValue({
                        index: index,
                        goodsCommissionPercentage: o
                    })
                }} value={e}></InputNumber>
            }
        },
        {
            title: <Popover content={<div>
                <div>
                    邀请人奖励：B是A邀请的推广员，B的客户购买推广商品，B获得商品佣金，A获得邀请人奖励。
                    默认邀请人奖励比例：用于添加商品/批量设置商品比例时默认填充的邀请人奖励比例
                </div>
            </div>}>
                默认邀请人奖励比例  <InfoCircleOutlined></InfoCircleOutlined>
            </Popover >,
            width: 120,
            dataIndex: 'inviteCommissionPercentage',
            render: (e, record, index) => {
                return <InputNumber addonAfter={<span>%</span>} max={100} onChange={(o) => {
                    setListValue({
                        index: index,
                        inviteCommissionPercentage: o
                    })
                }} value={e}></InputNumber>
            }
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (e, record, index) => {
                const { systemFlag } = record
                if (systemFlag === '1') {
                    return '--'
                }
                else {
                    if (index !== list.length - 1) {
                        return <Popover content={<div>
                            <div>
                                删除下一等级后才可删除当前等级
                            </div>
                        </div>}>
                            <Button disabled={true} type='link'>删除</Button>
                        </Popover >
                    }
                    return <Button onClick={() => removeList(index)} type='link'>删除</Button>


                }

            }
        },
    ];

    return <div>
        <TableDataBlock
            cardProps={{ title: '等级规则' }}
            columns={getColumns}
            rowKey={(record) => `${record.id}`}
            list={list}
            pagination={false}
        ></TableDataBlock>
        <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Button onClick={() => addList()}>+添加等级（{list.length}/{maxLength}）</Button>
            <div style={{ fontSize: 14 }}>
                商品价格＞200元时，相同等级或不同等级间的商品佣金+邀请人奖励比例必须≤60%
            </div>
        </div>
    </div >
}
export default forwardRef(RuleTemplate)